<template>
	<div class="login">
		<div class="logoLink">
			<router-link to="">
				<img src="../../assets/img/logo.png" width="200" height="auto" alt="云商" />
			</router-link>
		</div>
		<div style="height: 100%">
			<router-link to="">
				<img src="../../assets/img/backGround.png" width="100%" height="100%" alt="云商" />
			</router-link>
		</div>
		<div class="inputBox">
			<form action="">
				<input type="text" name="fakeusernameremembered" v-show="false" />
				<input type="password" name="fakeusernameremembered" v-show="false" />
				<div class="control-box">
					<div class="warn">{{info}}</div>
					<div class="control-form marginBottom18">
						<input type="text"   v-model="operatorPhone" class="ui-input" placeholder="请输入手机号码" @blur="checkPhoneForSaas">
					</div>
					<div class="control-form marginBottom18 verifyDiv" >
						<input type="text" class="ui-input" v-model="verifyCode" tabindex="3" name="verifyCode" placeholder="请输入图片识别码" autocomplete="off">
						<img :src="contentPic" title="点击刷新图片" height="40" width="105" class="auth-image" @click="vFun_reloadVeriCode">
					</div>
					<div class="control-form marginBottom18 verifyDiv" >
						<input type="text" class="ui-input" v-model="rendCode" tabindex="3" name="valida" placeholder="请输入验证码" autocomplete="off">
						<span class="regyan" @click="vFun_rendCode" :class="{jinyong:vue_phone_verifyBtn}">{{vue_ver}}</span>
					</div>
					<div class="control-form marginBottom18">
						<input type="password" ref="password" v-model="operatorLoginPassword"  tabindex="2" class="ui-input" placeholder="请输入密码" autocomplete="off"/>
						<em class="iconfont passEm" @click="Active">&#xe66a;</em>
					</div>
					<div class="control-form marginBottom18">
						<input type="text" v-model="companyName" tabindex="1" class="ui-input" placeholder="请输入公司名称" autocomplete="off">
					</div>
					<div class="control-form o-form marginBottom18 checkboxColorCCC">
						<el-checkbox v-model="cookie" class="checkboxFontSize14" @change="vue_disabled=!vue_disabled">我已同意服务条款，以及隐私政策</el-checkbox>
					</div>
					<div class="control-form borderR4 blue marginBottom18">
						<a class="loginBtn" @click="loginFn"  :disabled="Boolean(vue_disabled)">注册</a>
					</div>
				</div>
				<div class="down-con clearfix">
					<a class="fl" v-if="false">
						<em class="iconfont">&#xe63b;</em>
						手机下载
					</a>
					<a class="fr" @click="login">
						<em class="iconfont" style="position: relative;top: 2px;">&#xe668;</em>
						登录
					</a>
				</div>
			</form>
		</div>
	</div>
</template>


<script>
	export default {
		data(){
			return {
				contentPic:"/v3/misc/common/reloadVeriCode",
                rendCode:"",
				vue_phone_verifyBtn:false,
				vue_ver:'获取验证码',
				vue_disabled:false,
				vue_inputype:false,
				companyName:'',						//公司名称
				operatorPhone:'',						//手机号
				valida:'',						//验证码
				name:"",
				operatorLoginPassword:"",						//密码
				verifyCode:"",					//识别码
				info:"",
				cookie:true,
				passaaaa:'password',						//密码是否可视
			}
		},
		methods:{

			login(){

				window.location.hash = "#/login";
			},
			forget(){
				window.location.hash = "#/forget";
			},
			checkPhoneForSaas(){
				if (this.operatorPhone=='') {
//					this.info='手机号不能为空'
					return false;
				}else{
					var ostr=this.operatorPhone;
			      	var reg=/^(13[0-9]|14[57]|15[012356789]|17[67]|18[012356789])\d{8}$/;
					if (reg.test(ostr) != true){
						this.info='手机号格式不正确';
						return false;
					}else{
						this.info='';
					}
				}
				this.axios({
						method:"GET",
						url:"/v3/system/cmembers/checkPhoneForSaas",
						params:{
							"operatorPhone":this.operatorPhone,
						}
					}).then((res)=>{
						console.log(11)
					}).catch((err)=>{
						this.Public.openError(this,err.response.data);
					})
			},
//--------------------获取图片验证码----------------------------
            vFun_reloadVeriCode(){
            	this.contentPic = "/v3/misc/common/reloadVeriCode?"+Math.random();
            },
			vFun_rendCode(){			//获取验证码
				if (this.operatorPhone=='') {
					this.info='手机号不能为空'
					return false;
				}else{
					var ostr=this.operatorPhone;
			      	var reg=/^(13[0-9]|14[57]|15[012356789]|17[67]|18[012356789])\d{8}$/;
					if (reg.test(ostr) != true){
						this.info='手机号格式不正确';
						return false;
					}else{
						this.info='';
					}
				}
				if (this.verifyCode=='') {
					this.info='图片验证码不能为空'
					return false;
				}else{
					this.info=''
				}
				let num = 60;
				this.vue_phone_countDown = setInterval(()=>{
					this.vue_phone_verifyBtn = true;
					this.vue_ver = num+"后重新获取";
					num--;
					if(num<=-1){
						clearInterval(this.vue_phone_countDown);
						this.vue_ver = "重新获取";
						this.vue_phone_verifyBtn = false;
					}
				},1000);
				this.axios({
						method:"POST",
						url:"/v3/system/cmembers/saveSaasSendSms",
						params:{
							"operatorPhone":this.operatorPhone,
							"validateCode":this.verifyCode
						},
						data:{}
					}).then((res)=>{

					}).catch((err)=>{
						this.vFun_reloadVeriCode();//每次注册失败后图片验证码重新生成
						this.Public.openError(this,err.response.data);
					})
			},
			loginFn(){
				if (this.operatorPhone=='') {
					this.info='手机号不能为空'
					return false;
				}else{
					var ostr=this.operatorPhone;
			      	var reg=/^(13[0-9]|14[57]|15[012356789]|17[67]|18[012356789])\d{8}$/;
					if (reg.test(ostr) != true){
						this.info='手机号格式不正确';
						return false;
					}else{
						this.info='';
					}
				}
				if (this.rendCode=='') {
					this.info='验证码不能为空'
					return false;
				}else{
					this.info=''
				}
				if (this.operatorLoginPassword=='') {
					this.info='密码不能为空'
					return false;
				}else{
					var ostr=this.operatorLoginPassword;
			      	var reg=/^[a-zA-Z0-9]{6,20}$/;
					if (reg.test(ostr) != true){
						this.info='密码不能少于6位';
						return false;
					}else{
						this.info='';
					}
				}
				if (this.companyName=='') {
					this.info='公司名不能为空'
					return false;
				}else{
					this.info=''
				}

				this.axios({
					method:"POST",
					url:"/v3/system/cmembers/saveSaasNewCmember",
					params:{
						"operatorPhone":this.operatorPhone,
						"operatorLoginPassword":this.md5(this.operatorLoginPassword).toUpperCase(),
						"companyName":this.companyName,
						"rendCode":this.rendCode,
					},
					data:{}
					}).then((res)=>{
						this.Public.openSuccess(this,"开通成功！");
						// history.back();
						window.location.hash = "#/index";
					}).catch((err)=>{
						this.vFun_reloadVeriCode();//每次注册失败后图片验证码重新生成
						this.Public.openError(this,err.response.data);
					})
			},
			Active(){
				this.vue_inputype = !this.vue_inputype;
				if (this.vue_inputype) {
					this.$refs['password'].type = "text";
				} else{
					this.$refs['password'].type = "password";
				}
			},
		},
		mounted(){
			this.vFun_reloadVeriCode();
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
		transition: .2s;
	}
	.login {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg,#FDC031,#184069);
	}
	.logoLink {
		position: absolute;
		top: 40px;
		left: 40px;
	}
	.introduceLink {
		position: absolute;
		top: 10%;
		left: 15%;
	}
	.inputBox {
	    position: absolute;
	    width: 360px;
	    right: 10%;
	    top: 20%;
	    padding: 60px 30px;
	    background: url('../../assets/img/black-30.png') repeat;
	}
	.inputBox .warn {
	    position: absolute;
	    top: 40px;
	    height: 14px;
	    line-height: 14px;
	    font-size: 14px;
	    color: #f00;
	}
	.inputBox .control-form {
	    position: relative;
	}
	.ui-input {
		box-sizing: border-box;
	    width: 300px;
	    height: 42px;
	    padding: 0 20px;
	    padding: 0px 20px;
	    border: 1px solid #FFF;
	    border-radius: 2px;
	    transition: .4s;
	    font-size: 14px;
	}
	.ui-input:focus {
		border-color: #03B8CC;
	}
	.auth-image {
		position: absolute;
	    right: 1px;
	    top: 1px;
	    height: 40px;
	}
	.verifyDiv {
		position: relative;
	}
	.verifyDiv span{
		height: 40px;
		line-height: 40px;
		border-left:1px solid #edf0f1 ;
		position: absolute;
		top: 1px;
		right: 0;
		width: 105px;
		text-align: center;
		cursor: pointer;
		background: #fff;
	}
	.marginBottom18 {
		margin-bottom: 18px;
	}
	.o-form {
		position: relative;
		font-size: 14px;
    	color: #CCCCCC;
	}
	.o-form a{
		cursor: pointer;
	}
	.o-form a:hover{
		color: #fff;
		text-decoration: underline;
	}
	.forget-pwd {
		float: right;
    	color: #CCCCCC;
	}

	.loginBtn {
		cursor: pointer;
		display: block;
		width: 300px;
		height: 42px ;
		line-height: 40px ;
		font-size: 18px;
		margin-left: 0 ;
		background: rgb(9, 159, 184);
		text-align: center;
		color: #fff;
		border-radius:3px ;
	}
	.inputBox .down-con {
	    position: absolute;
	    bottom: 40px;
	    right: 30px;
	    left: 30px;
	    height: 30px;
	    line-height: 30px;
	}
	.inputBox .down-con a {
	    display: inline-block;
	    font-size: 16px;
	    color: #CCCCCC;
	    height: 30px;
	    line-height: 30px;
	    cursor: pointer;
	    transition: .2s;
	}
	.inputBox .down-con a:hover {
	    color: #fff;
	}
	.inputBox .down-con a em {
	    height: 30px;
	    line-height: 30px;
	}
	.passEm{
		position: absolute;
		right: 5px;
		top: 5px;
		color: #aaa;
		cursor: pointer;
	}
	.jinyong{
    	pointer-events: none;
    }

</style>
